<template>
  <div>
    <div class="flex-jc-s-b" style="padding: 15px 20px">
      <div class="left-title">详情</div>
      <span v-if="detailForm.hasEdit" style="font-size: 14px;color: #409EFF;cursor: pointer" @click="edit">修改</span>
    </div>
    <el-form
        ref="formControl"
        :inline="false"
        :label-suffix="detailForm.labelSuffix ? detailForm.labelSuffix : '：'"
        :label-width="detailForm.labelWidth ? detailForm.labelWidth : '130px'"
        size="mini"
    >
      <el-row>
        <!--不循环row，直接循环col，放不下会自动往下换行。-->
        <el-col
            v-for="item in detailForm.column"
            :key="item.code"
            :span="item.span ? item.span : 7"
        >
          <el-form-item
              :label="item.name"
              :prop="item.code"
              v-if="!item.isSpace"
          >
            <div :title="item.formatter(detailForm.data)" class="overflow-nowrap" v-if="item.formatter">{{ item.formatter(detailForm.data) }}</div>
            <div v-else-if="item.html" class="overflow-nowrap" v-html="item.html(detailForm.data)"></div>
<!--            <img v-else-if="item.isImage" :src="detailForm.data[item.code]" :style="item.style ? item.style : 'width: 120px'" @click="imageClick(item)"/>-->
            <el-image
                v-else-if="item.isImage"
                :src="detailForm.data[item.code]" :style="item.style ? item.style : 'width: 120px'"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[detailForm.data[item.code]]"
                :initial-index="0"
                :preview-teleported="true"
            />

            <!--表单item组件，采用动态组件的方式-->
            <template v-else-if="item.component">
              <component
                  :is="item.component"
                  :item="detailForm"
                  :key="item.code"
              >
              </component>
            </template>
            <span v-else :title="detailForm.data[item.code]" class="overflow-nowrap" :class="item.clazz ? item.clazz : ''" :style="item.style ? item.style : ''">{{ detailForm.data[item.code]}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="flex-center" style="position: fixed;width: 100%;bottom: 5%">
      <el-button @click="close">关 闭</el-button>
    </div>
  </div>

  <el-dialog
      v-model="imgDialogVisible"
      :title="imageItem.name"
      width="800px"
      append-to-body
  >
    <img
        :src="imageItem.src"
        style="display: block; max-width: 100%; margin: 0 auto"
    />
  </el-dialog>
</template>
<script setup>
import {onMounted, reactive, ref, useSlots} from 'vue'
import {useRouter} from 'vue-router/dist/vue-router'

const { proxy } = getCurrentInstance();
const router = useRouter()
const input = ref('')
const slots = useSlots()
const props = defineProps({
  detailForm: {
    default: function () {
      return {}
    }
  },
})

const emit = defineEmits(['editHandle']);
onMounted(() => {
})

const imageItem = reactive({
  label: '',
  src: ''
})

const imgDialogVisible = ref(false);

function imageClick(item) {
  imageItem.name = item.name
  imageItem.src = props.detailForm.data[item.code]
  imgDialogVisible.value = true
}
function edit() {
  emit('editHandle')
}
function close() {
  proxy.$tab.closeOpenPage();
  router.go(-1)

}
</script>

<style></style>
